<script setup lang="ts">
import { computed, defineExpose, withDefaults } from 'vue'
defineExpose({
  name: 'OtherMessage'
})

const props = withDefaults(defineProps<{
  message: string | undefined | number,
  src: string | undefined,
  noWrap?: boolean
}>(), {
  noWrap: false,
})

const getWrap = computed(() => {
  return props.noWrap ? 'nowrap' : 'normal'
})
</script>

<template>
  <!-- 对方消息  -->
  <div class="other-message-box">
    <!-- 头像 -->
    <div class="avatar-box">
      <img class="avatar" :src="src || '../public/images/avatar/avatar-210.jpg'" alt="">
    </div>
    <!-- 对方聊天消息框 -->
    <div class="other-message">{{ message }}</div>
  </div>
</template>

<style scoped lang="scss">
.other-message-box {
  margin-bottom: $message-message-space;
  display: flex;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  // 字体描边实现加粗
  -webkit-text-stroke: 0.2px currentColor;
  font-size: $chat-font-size;

  .avatar-box {
    width: $avatar-size;
    height: $avatar-size;
    border-radius: $avatar-radius;
    overflow: hidden;
    margin-right: $avatar-message-space;

    .avatar {
      width: $avatar-size;
      border-radius: $avatar-radius;
      height: $avatar-size;
      object-fit: cover;
    }
  }

  .other-message {
    padding: $message-box-padding;
    border-radius: $message-box-radius;
    max-width: $max-width;
    background-color: $other-message-bg-color;
    color: $other-message-color;
    position: relative;
    line-height: $message-line-height;
    letter-spacing: $font-letter-spacing;
    white-space: v-bind(getWrap);

    &:before {
      content: '';
      position: absolute;
      left: -5px;
      top: 15px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-right: 6px solid $other-message-bg-color;
    }
  }
}
</style>